<template>
    <header>
        <div class="login-layer" v-if="loginShow">
            <div class="form-block">
                <i class="form-close" @click="swicthLogin">X</i>
                <div class="form-input">
                    <label class="form-label" for="userName">用户名:</label>
                    <input type="text" id="userName" v-model="userName">
                </div>
                <div class="form-input">
                    <label class="form-label" for="userPwd">密码</label>
                    <input type="text" id="userPwd" v-model="userPwd">
                </div>
                <div class="form-btn">
                    <button type="button" @click="login">登录</button>
                </div>
            </div>
        </div>
        <div class="header-nav">
            <span v-if="account != ''">{{ account }}1</span>
            <button type="button" @click="swicthLogin" v-if="account == ''">登录</button>
            <button type="button" @click="loginOut" v-else>loginOut</button>
        </div>
    </header>
</template>
<script>
    import '../assets/css/login.css';
    import axios from 'axios';
    export default {
        data() {
            return {
                userName: '',
                userPwd: '',
                loginShow: false,
                account: ''
            }
        },
        methods: {
            login() {
                axios.post('/users/login', {
                    userName: this.userName,
                    userPwd: this.userPwd
                }).then(res => {
                    if (res.data.status == 0) {
                        this.loginShow = false;
                        this.account = this.getCookie('userName');
                        this.userName = '';
                        this.userPwd = ';'
                        alert('登录成功！');
                    } else {
                        alert(res.data.msg);
                    }
                });
            },
            loginOut() {
                axios.post('/users/loginOut', {}).then(res => {
                    if (res.data.status == 0) {
                        this.account = '';
                    }
                })
            },
            swicthLogin() {
                this.loginShow = !this.loginShow;
            },
            getCookie(key) {
                let cookies = document.cookie;
                let cookieObj = {};
                if (cookies != '') {
                    let cookieArr = cookies.split(';');
                    cookieArr.forEach(item => {
                        let cookieItem = item.trim().split('=');
                        cookieObj[cookieItem[0]] = cookieItem[1];
                    });
                }
                return key ? cookieObj[key] : cookieObj;
            },
        },
        created() {
            if (this.getCookie('userName')) {
                this.account = this.getCookie('userName');
            }
        } 
    }
</script>
<style scoped>
    .header-nav {
        height: 80px;
        width: 100%;
        background: #ccc;
    }
</style>
